@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

@layer components {
    .base-container {
        @apply max-w-[1297px] mx-auto;
    }

    .navbar-container-end {
        @apply base-container flex justify-end items-center gap-[36px];
    }
    .navbar-container-between {
        @apply base-container flex justify-between max-md:justify-center items-center gap-[36px];
    }
    .navbar-text {
        @apply h-[80px] leading-[80px] max-md:h-[45px] max-md:leading-[45px] text-[#7b848d] hover:text-[#679DF6] cursor-pointer font-bold underline-offset-[10px] transition duration-300 ease-in-out hover:underline;
    }
    .navbar-button {
        @apply ml-[35px] max-md:hidden cursor-pointer text-[#fff] bg-[#679DF6] text-[14px] active:bg-[#548de9] active:text-[#fff] py-[12px] px-[26px] rounded-[3px];
    }
    .navbar-search {
        @apply w-full max-md:w-[350px] h-[53px] bg-[#fff] rounded-[5px];
    }

    .banner {
        @apply base-container h-[380px] mt-[5px] max-md:h-[220px] w-full max-md:w-auto max-md:mx-[5px] flex items-center bg-[rgba(19,19,19,1)] bg-[url('@/static/waves-light.svg')] bg-cover rounded-[8px];
    }
    .banner-container {
        @apply flex flex-col justify-center gap-[40px] ml-[60px] max-md:ml-[10px];
    }
    .banner-search {
        @apply w-[525px] max-md:w-[320px] h-[53px] bg-[#fff] rounded-[5px];
    }
    .banner-search-button {
        @apply flex items-center justify-center cursor-pointer text-[#fff] bg-[#4285F4] text-[14px] active:bg-[#3f7adb] active:text-[#fff] py-[13px] px-[15px] rounded-[3px] mr-[1px];
    }

    .statistics {
        @apply base-container w-full bg-[#F8FAFD] rounded-[8px] grid grid-cols-3 max-md:grid-cols-1 mt-[30px] max-md:mt-[10px] max-md:gap-0;
    }
    .statistics-items {
        @apply p-[30px] max-md:p-[10px] flex items-center gap-[20px] max-md:h-[45px];
    }

    .data-list {
        @apply base-container w-full border-solid border-[#efeeee] border-[1px] rounded-[8px] grid grid-cols-2 max-md:grid-cols-1 mt-[30px] max-md:mt-0;
    }
    .data-list-container {
        @apply flex justify-between items-center py-[10px] max-md:flex-col max-md:items-start max-md:gap-[10px] border-b-muted border-solid border-t-0 border-l-0 border-r-0 border-b-[1px] border-opacity-20;
    }
    .data-list-more {
        @apply text-[#5A6773] text-[13px] border-[#efeeee] border-[1px] border-solid rounded-[5px] px-[15px] py-[8px] cursor-pointer hover:border-[#4285F4] hover:border-opacity-70;
    }
    .data-list-quantity {
        @apply py-[5px] px-[3px] bg-[#F8FAFD] text-[12px] text-center;
    }
    .divider {
        @apply h-[1px] w-full bg-[#dbdada] mt-[25px] max-md:mt-[20px] mb-[20px];
    }

    .detail {
        @apply max-md:h-[220px] w-full bg-[#F8FAFD] mt-[4px];
    }
    .detail-container {
        @apply base-container h-[320px] max-md:h-[250px] flex items-center gap-[30px] bg-[#F8FAFD];
    }
    .detail-list {
        @apply base-container w-full grid grid-cols-1 max-md:mt-[10px];
    }
    .detail-list-container-title {
        @apply grid grid-cols-6 justify-end py-[12px] max-md:flex-col max-md:items-start max-md:gap-[5px];
    }
    .detail-list-container-content {
        @apply detail-list-container-title max-md:flex;
    }

    .block-button-blue {
        @apply bg-[#0784C3] text-[#fff] px-[15px] py-[7px] rounded-[10px] text-[12px] cursor-pointer;
    }
    .block-button-white {
        @apply bg-[#E9ECEF] text-[black] px-[10px] py-[7px] rounded-[10px] text-[12px] cursor-pointer;
    }

    .footer {
        @apply mt-[20px] h-[140px] w-full bg-[rgba(19,19,19,1)] flex justify-around items-center;
    }
}
